<template>
  <div>
    <div
      style="
        writing-mode: vertical-lr;
        position: fixed;
        left: 20px;
        margin-top: 10px;
      "
    >
      <h2
        style="
          font-weight: normal;
          font-family: 楷体, DFKai-SB, GB2312, KaiTi_GB2312, STXingkai, STKaiti;
        "
      >
        {{ count_down_data.text }}
      </h2>
    </div>
    <div style="margin: 10px 0px 10px 0px">
      <List border size="large">
        <Card
          v-for="(item, i) in count_down_data.count_down_list"
          :Key="i"
          style="
            margin: 10px 10px;
            background: rgb(255, 255, 255, 0.5) !important;
          "
        >
          <!-- 标题 -->
          <div style="text-align: center">
            <h2>{{ item.title }}</h2>
          </div>

          <!-- 时间环 -->
          <div
            style="
              text-align: center;
              margin-top: 10px;
              background: rgb(255, 255, 255, 0.5) !important; ;
            "
          >
            <Circle
              :percent="(item.time_ms - now_time_ms) / 1000 / (60 * 60 * 24)"
              dashboard
            >
              <!-- 剩余时间 -->
              <div style="text-align: center; font-size: large">
                <Time type="relative" :time="item.time_ms" />
              </div>
              <Icon
                v-if="(item.time_ms - now_time_ms) / 1000 / (60 * 60 * 24) < 0"
                type="ios-checkmark"
                size="60"
                style="color: #5cb85c"
              ></Icon>
            </Circle>
          </div>
          <div style="text-align: center">
            <DatePicker
              style="background: rgb(255, 255, 255, 0.5) !important"
              readonly
              format="yyyy-MM-dd HH:mm"
              :show-week-numbers="true"
              :model-value="item.time"
              type="datetime"
            />
          </div>
        </Card>
      </List>
    </div>
  </div>
</template>

<script>
import { PATH_count_down, aliyun_oss_path } from '@/mylibs/define'
import get_oss_data from '@/api/aliyun_oss'
export default {
  data() {
    return {
      now_time_ms: new Date().getTime(),
      count_down_data: {
        text: '多少事，从来急；天地转，光阴迫。一万年太久，只争朝夕。',
        count_down_list: [{ title: '', time: '' }]
      }
    }
  },

  methods: {
    async getData() {
      let { ok, res, err } = await get_oss_data(
        aliyun_oss_path + PATH_count_down
      )
      if (ok) {
        if (res) {
          this.count_down_data = res
          console.log(res)
        }
      } else {
        this.$Notice.error({ desc: err })
      }
    }
  },
  created() {
    this.getData()
  }
}
</script>

<style></style>
